<template>
  <view>
    <up-popup round="16" :show="modelValue" :closeOnClickOverlay="true" @close="close" mode="bottom" @open="open">
      <view class="up_popup_title">
        <view class="title">上门时间</view>
        <image src="@/static/icon/icon_close.png" @tap="close"></image>
      </view>
      <view class="time-select">
        <view class="time-content">
          <view class="date-column">
            <view
              v-for="(date, index) in [{key: 'today', text: '今天'}, {key: 'tomorrow', text: '明天'}]"
              :key="date.key"
              :class="['date-item', currentDate === date.key ? 'active' : '']"
              @tap="switchDate(date.key)"
            >
              <text class="date-text">{{date.text}}</text>
              <text class="date-value">{{formatDate(date.key === 'today' ? today : tomorrow)}}</text>
            </view>
          </view>
          <scroll-view scroll-y class="time-slots">
            <view
              v-for="(slot, index) in currentTimeSlots"
              :key="index"
              :class="['time-slot', selectedSlot === slot ? 'active' : '']"
              @tap="selectTimeSlot(slot)"
            >
              {{slot}}
            </view>
          </scroll-view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  startTime:{
    type: String,
    default: '9:00',
  },
   endTime:{
    type: String,
    default: '18:00',
  }
});

const emit = defineEmits(['update:modelValue', 'selectTime']);

const currentDate = ref('today');
const selectedSlot = ref('');
const today = new Date();
const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);

const currentTimeSlots = computed(() => {
  const slots = [];
  // 解析 startTime 和 endTime
  const [startHour, startMinute] = props.startTime.split(':').map(Number);
  const [endHour, endMinute] = props.endTime.split(':').map(Number);
  const now = new Date();
  const currentHour = now.getHours();
  const currentMinute = now.getMinutes();

  // 以30分钟为步长生成时间段
  let start = new Date();
  start.setHours(startHour, startMinute, 0, 0);
  let end = new Date();
  end.setHours(endHour, endMinute, 0, 0);

  let temp = new Date(start.getTime());
  while (temp < end) {
    // 只显示今天未过的时间段
    if (currentDate.value === 'today') {
      if (
        temp.getHours() < currentHour ||
        (temp.getHours() === currentHour && temp.getMinutes() <= currentMinute)
      ) {
        temp = new Date(temp.getTime() + 30 * 60000);
        continue;
      }
    }
    let next = new Date(temp.getTime() + 30 * 60000);
    // 如果下一个时间超过end，则最后一项以endTime结尾
    let slotEnd = next > end ? props.endTime : `${String(next.getHours()).padStart(2, '0')}:${String(next.getMinutes()).padStart(2, '0')}`;
    slots.push(`${String(temp.getHours()).padStart(2, '0')}:${String(temp.getMinutes()).padStart(2, '0')} - ${slotEnd}`);
    temp = next;
    if (slotEnd === props.endTime) break;
  }
  return slots;
});

const formatDate = (date) => {
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

const switchDate = (date) => {
  currentDate.value = date;
  selectedSlot.value = '';
};

const selectTimeSlot = (slot) => {
  selectedSlot.value = slot;
  emit('selectTime', {
    date: currentDate.value === 'today' ? formatDate(today) : formatDate(tomorrow),
    time: slot
  });
};

const close = () => {
  emit('update:modelValue', false);
};

const open = () => {
  currentDate.value = 'today';
  selectedSlot.value = '';
};
</script>

<style lang="scss">
.up_popup_title {
  box-sizing: border-box;
  padding: 32rpx;
  display: flex;
  border-bottom: 2rpx solid #f5f5f5;
  > image {
    width: 28rpx;
    height: 28rpx;
  }
  .title {
    flex: 1;
    font-weight: 500;
    font-size: 32rpx;
    color: #222222;
    text-align: center;
  }
}

.time-select {
  .time-content {
    display: flex;
    min-height: 800rpx;
  }

  .date-column {
    width: 240rpx;
    background: #f8f8f8;

    .date-item {
      padding: 40rpx 20rpx;
      text-align: center;

      .date-text {
        display: block;
        font-size: 32rpx;
        color: #333;
        margin-bottom: 8rpx;
      }

      .date-value {
        display: block;
        font-size: 24rpx;
        color: #999;
      }

      &.active {
        background: #fff;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6rpx;
          height: 40rpx;
          background: #2080f7;
          border-radius: 0 4rpx 4rpx 0;
        }

        .date-text, .date-value {
          color: #2080f7;
        }
      }
    }
  }

  .time-slots {
    flex: 1;
    padding: 20rpx;
    height: 800rpx;

    .time-slot {
      padding: 30rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      text-align: center;
      font-size: 28rpx;
      color: #333;
      border: 2rpx solid #eee;

      &.active {
        background: rgba(32, 128, 247, 0.05);
        border-color: #2080f7;
        color: #2080f7;
      }
    }
  }
}
</style>
